<template>
	<div class="ratingselect">
		<div class="rating-type">
			<span @click="select(2,$event)" class="block posivite" :class="{'active':selectType===2}">{{desc.all}}
				<span class="count">{{rating.length}}</span>
			</span>
			<span @click="select(0,$event)" class="block posivite" :class="{'active':selectType===0}">{{desc.positive}}
				<span class="count">{{positives.length}}</span>
			</span>
			<span @click="select(1,$event)" class="block negative" :class="{'active':selectType===1}">{{desc.negative}}
				<span class="count">{{negatives.length}}</span>
			</span>
		</div>
		<div @click="toggleContent" class="switch" :class="{'on':onlyContent}">
			<i class="icon-check_circle"></i>
			<span class="text">只看有内容的评价</span>
		</div>
	</div>
</template>
<script>
const POSITIVE = 0;
const NEGATIVE = 1;
const ALL = 2;

export default {
	props: {
		rating: {
			type: Array,
			default: []
		},
		selectType: {
			type: Number,
			default:ALL
		},
		onlyContent: {
			type: Boolean,
			default: false
		},
		desc:{
			type: Object,
			default () {
				return {
					all:'全部',
					positive:"满意",
					negative:"不满意"
				}
			}
		}
	},
	data () {
		return {

		}
	},
	computed:{
		positives() {
			console.log(this.rating)
			return this.rating.filter(rating => rating.rateType === POSITIVE);
		},
		negatives() {
			return this.rating.filter(rating => rating.rateType === NEGATIVE);
		}
	},
	methods:{
		toggleContent () {
			if (!event._constructed) {
				return;
			}
			this.$emit('toggle');
		},
		select (index) {
			this.$emit('select',index)
		}
	}
}
</script>

<style lang="stylus" scoped>
.rating-type
	margin 0 18px
	padding 18px 0
	font-size 0
	border-bottom 1px solid rgba(7,17,27,.1)
	.block
		display inline-block
		padding 8px 12px
		line-height 16px
		margin-right 8px
		border-radius 2px
		color #4d555d
		font-size 12px
		background rgba(0,160,220,.2)
		&.active
			background #00a0dc
			color #fff
		&.negative
			background rgba(77,85,93,.2)
			&.active
				background-color #4d555d
.switch
	font-size 12px
	padding 12px 18px
	line-height 24px
	border-bottom 1px solid rgba(7,17,27,.1)
	i
		font-size 24px
		margin-right 4px
		display inline-block
		vertical-align middle
		color #93999f
	&.on
		i
			color #00c850
</style>

